<script lang="ts" setup>
import { ref, computed } from 'vue'
import { getPlaylistTags } from '@/api/song'
import type { Tag } from '@/types/song/index'

const emit = defineEmits<{ (e: 'toggleTag', value: string): void }>()

const props = defineProps<{ currentTag: string }>()

const tags = ref<Tag[]>()

const getTag = async () => {
  const { data } = await getPlaylistTags()
  if (data.code !== 200) return ElMessage.error('获取失败')
  tags.value = data.tags
}
getTag()
const clickTag = (tag: string) => {
  emit('toggleTag', tag)
}

const isActive = computed(() => (tag: string) => tag === props.currentTag)
</script>

<template>
  <div class="grid grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 2xl:grid-cols-12 gap-3 text-sm">
    <div class="cus-btn icon-hover" :class="{ active: isActive('全部') }" @click="clickTag('全部')">全部</div>
    <div
      class="cus-btn icon-hover"
      :class="{ active: isActive(tag.name) }"
      v-for="tag in tags"
      :key="tag.id"
      @click="clickTag(tag.name)"
    >
      {{ tag.name }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.cus-btn {
  @apply bg-[#e6e6e6] rounded text-center py-1;
}
.active {
  @apply text-white bg-emerald-400;
}
</style>
